<template>
  <div class="WsyjNavDateTimeBar">
    <!-- <div>这里是时间日期显示条小组件</div> -->
    <div class="dateWrap">
      <span
        class="date"
      >{{ curDate.today.year }}年{{ curDate.today.month }}月{{ curDate.today.date }}日</span>
      <span class="time">{{ curDate.time }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class WsyjNavDateTimeBar extends Vue {
  private intervals: any = null;
  private curDate = this.formatCh();
  public mounted() {
    const self: any = this;
    this.intervals = setInterval(() => {
      self.curDate = self.formatCh();
    }, 1000);
  }

  public formatCh() {
    const temp = this.parseTime(new Date(), null).split(' ');
    const today = temp[0].replace('-', '年').replace('-', '月');
    const tempYear = today.split('年');
    const tempMonth = tempYear[1].split('月');
    const time = temp[1].slice(0, 8);
    return {
      today: {
        year: tempYear[0],
        month: tempMonth[0],
        date: tempMonth[1].split('日')[0],
      },
      time,
    };
  }
  public parseTime(time: any, cFormat: any) {
    if (arguments.length === 0) {
      return null;
    }
    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
    let date;
    if (typeof time === 'object') {
      date = time;
    } else {
      let timeNum: number = 0;
      if (('' + time).length === 10) {
        timeNum = parseInt(time, 10) * 1000;
      }
      date = new Date(timeNum);
    }
    const formatObj: any = {
      y: date.getFullYear(),
      m: date.getMonth() + 1,
      d: date.getDate(),
      h: date.getHours(),
      i: date.getMinutes(),
      s: date.getSeconds(),
      a: date.getDay(),
    };
    const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result: any, key: string ) => {
      let value = formatObj[key];
      // Note: getDay() returns 0 on Sunday
      if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ]; }
      if (result.length > 0 && value < 10) {
        value = '0' + value;
      }
      return value || 0;
    });
    return timeStr;
  }

  public beforeDestroy() {
    clearInterval(this.intervals);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@headerHeight: 53px;
.WsyjNavDateTimeBar {
   
  .dateWrap {
    margin: 10px 20px 0 0;
    width: 350px;
    height: 100%;
    background-color: #000000;
    border-radius: 6px;
    span {
      display: inline-block;
      padding-left: 20px;
    }
    .date {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 36px;
      letter-spacing: 0px;
      color: #ffffff;
    } 
    .time {
      font-family: STHeitiSC-Light;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 36px;
      letter-spacing: 1px;
      color: #00ff72;
    }
  }
}
</style>
